<template>
	<view>
		<uni-swiper-dot :info="info" :current="current" field="content">
			<!-- <swiper class="banner" indicator-dots="true" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#fff" autoplay="true"> -->
			<swiper class="banner" @change="changeDot" autoplay="true">
				<swiper-item class="item">
					<image src="http://files.zhizhuedu.cn/lesson-banner-1.png" lazy-load="true"></image>
				</swiper-item>
				<swiper-item class="item">
					<image src="http://files.zhizhuedu.cn/lesson-banner-2.png" lazy-load="true"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
		data(){
			return {
				info: [{
					content: "A"
				},{
					content: 'B'
				}],
				current: 0,
				// mode: rou
			}
		},
		components: {uniSwiperDot},
		methods:{
			changeDot(e){
				this.current = e.detail.current
			}
		}
	}
</script>

<style scoped>
.banner{height:240upx;width:688upx;border-radius: 20upx;overflow: hidden;}
.item{}
.item image{width: 100%; height:100%; background: #0077AA;border-radius: 20upx;}
</style>
